import React, {useEffect, useState} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import leaveType from '@/common/leaveType'
import approvedType from '@/common/approved'
import moment from 'moment'
import {fetchLeaveDel, fetchLeaveEdit} from '@/api/fetchAttend'
import {
  handleAttendList
} from '@/store2/actions/attend'
import {
  Row, 
  Col,
  Button,
  Table
}from 'antd'
import {
  FormOutlined
} from '@ant-design/icons'
export default props => {
  const list = useSelector(store => store.attend.list)
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '75px'
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      align: 'center',
      width: '150px'
    },
    {
      title: '请假类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '100px',
      render: type => leaveType.map(item => type === item.cate && item.cate_zh)
    },
    {
      title: '请假时间',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      width: '280px',
      render:time => `${moment(time[0]).format('YYYY-MM-DD HH:mm')}至${moment(time[1]).format('YYYY-MM-DD HH:mm')}`
    },
    {
      title: '时长',
      dataIndex: 'times',
      key: 'times',
      align: 'center',
      width: '75px'
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      align: 'center',
      width: '150px',
      render: create_time => moment(create_time).format('YYYY-MM-DD HH:mm')
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
      align: 'center',
      render: remarks =><div className="my-remarks">{remarks}</div>
    },
    {
      title: '审批人',
      dataIndex: 'approved',
      key: 'approved',
      align: 'center',
      width: '75px',
      render: approved => approvedType.map(item => item.cate === approved && item.cate_zh)
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: '75px',
      render: (status, list) => status === 0 ? <Button type="primary" onClick={() => changeStatus(list)} size="small" danger>代审批</Button> : <Button type="primary" size="small">已批准</Button>
    },
    {
      title: '操作',
      dataIndex: '_id',
      key: '_id',
      align: 'center',
      width: '75px',
      render: _id => <span style={{color: '#5181A8', cursor: 'pointer'}} onClick={() => delRow(_id)}>删除</span>
    },
  ];
  const [filter, setFilter] = useState({
    page: 1,
    limit: 3
  })
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(handleAttendList())
  }, [])
  const changeFilter =(val) => {
    setFilter(val)
  }
  const delRow = _id => {
    console.log(_id);
    fetchLeaveDel({_id}).then(res => {
      res.err === 0 && dispatch(handleAttendList())
    })
  }
  const changeStatus = list => {
    fetchLeaveEdit({_id: list._id}).then(res => {
      dispatch(handleAttendList())
    })
  }

  return (
    <div className="my-leave">
      <Row justify="space-between" style={{marginBottom: 20}}>
        <Col span={6}>请假管理</Col>
        <Col span={6}>
          <Button type="primary" onClick={() => props.history.push('/dash/attend/update')}><FormOutlined />添加申请</Button>
        </Col>
      </Row>
      <Table 
        dataSource={list} 
        columns={columns} 
        bordered={true}
        rowKey={'_id'}
        pagination={{
          total: list.total || 0,
          showSizeChanger: true,
          pageSizeOptions: [3,6,18],
          showTotal: (total, range) => (`第${range[0]}-${range[1]}条 / 总共${total} 条`),
          defaultPageSize: filter.limit,
          defaultCurrent: filter.page,
          current: filter.page,
          onChange: (page,limit)=>changeFilter({page,limit})
        }}

        />;
    </div>
  )
}